<template>
    <el-table :data="paymentHistorys">
        <el-table-column prop="caseId" label="案件编号"></el-table-column>
        <el-table-column label="提供人">
            <template #default="scope">
                {{ getUserNameOfPayment(scope.row.caseId, scope.row.userId) }}
            </template>
        </el-table-column>
        <el-table-column label="还款记录创建时间">
            <template #default="scope">
                {{ getCaseByCaseId(scope.row.caseId)?.createdTime }}
            </template>
        </el-table-column>
        <el-table-column label="审批状态">
            <template #default="scope">
                {{ PaymentHistory.getStatusComment(scope.row) }}
            </template>
        </el-table-column>
        <el-table-column label="案件创建时间">
            <template #default="scope">
                {{ getCaseByCaseId(scope.row.caseId)?.createdTime }}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-tooltip content="查看详细" placement="bottom" effect="dark">
                    <el-button v-if="allowLookDetail" round type="success"
                        @click="detailedDialog.look(scope.row.caseId, getCaseByCaseId(scope.row.caseId))"
                        icon="view"></el-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="审批" placement="bottom">
                    <el-button v-if="allowExamine" type="primary" round icon="Edit"
                        @click="examinePayment.look(scope.row.paymentHistoryId)"></el-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="下载还款资料" placement="bottom">
                    <el-button type="primary" round @click="fileStore.download(scope.row.paymentProve)">
                        <el-icon>
                            <download></download>
                        </el-icon>
                    </el-button>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog style="width: 40vw;" v-model="examinePayment.visible">
        <template #title>
            <div>审批还款</div>
        </template>
        <div class="row">
            <el-button style="width: 25%;" type="success" @click="examinePayment.exmaine(1)">同意</el-button>
            <el-button style="width: 25%;" type="danger" @click="examinePayment.exmaine(0)">拒绝</el-button>
        </div>
    </el-dialog>
    <DetailedCase v-model="detailedDialog.visible" :case="detailedDialog.case" :case-id="detailedDialog.caseId">
    </DetailedCase>
</template>
<script lang="ts" setup>
import { Case } from '@/types/response/case';
import DetailedCase from './detailedCase.vue';
import PaymentHistory from '@/types/response/paymentHistory';
import { reactive, ref, watch, defineProps } from 'vue';
import { getCaseById } from '@/axios/case/caseReq';
import useFileStore from '@/stores/fileStore';
import { examinePaymentHistoryReq, getPaymentHistoryByCase } from '@/axios/case/paymentHistoryReq';
import Notice from '@/utils/notice';
//审批还款记录
let fileStore = useFileStore();
let examinePayment = reactive({
    id: null,
    visible: false,
    look(id: number) {
        examinePayment.id = id;
        examinePayment.visible = true;
    },
    hidden() {
        examinePayment.id = null;
        examinePayment.visible = false;
    },
    async exmaine(flag: number) {//审核
        let res = await examinePaymentHistoryReq(examinePayment.id, flag);
        if (res) {
            Notice.success("审批完成");
            //如果审核完毕 那么删除该条待审批数据
            paymentHistorys.value.splice(paymentHistorys.value.findIndex(item => item.paymentHistoryId == examinePayment.id), 1);
        }
        else {
            Notice.error("审批失败");
        }
        examinePayment.hidden();
    }
})

let props = defineProps({
    caseId: {
        type: Number,
        required: false,
    },
    getByCaseId: {
        required: false,
        type: Boolean
    },
    allowExamine: {
        required: true,
        type: Boolean
    },
    allowLookDetail: {
        required: true,
        type: Boolean
    },
    paymentHistory: {
        type: Array<PaymentHistory>,
        required: true
    },
    cases: {
        type: Array<Case>
    }
});
let paymentHistorys = ref([]);//还款记录信息

let caseMap = reactive(new Map<number, Case>());
function getCaseByCaseId(caseId: number) {
    if (!caseId) return;
    let c = caseMap.get(caseId);
    if (c == null) {
        getCaseById(caseId).then(res => {
            caseMap.set(caseId, res);
        })
    }
    return c;
}
let detailedDialog: {
    visible: boolean,
    caseId: number,
    case: Case,
    look: (caseId: number, ca: Case) => void;
} = reactive({
    visible: false,
    caseId: null,
    case: null,
    look(caseId: number, c: Case) {
        detailedDialog.visible = true;
        detailedDialog.caseId = caseId;
        detailedDialog.case = c;
    }
})
function getUserNameOfPayment(caseId: number, userId: number) {
    let caseName = '';
    let c = getCaseByCaseId(caseId);
    if (c) {
        if (c.rspId == userId) return c.respondent.name;
        if (c.aptId == userId) return c.applicant.name;
    }
    return caseName;
}
if (props.getByCaseId && props.caseId) {
    paymentHistorys.value = [];
    getPaymentHistoryByCase(props.caseId).then(res => {
        paymentHistorys.value = res;
    })
}
watch(props.paymentHistory, () => {
    paymentHistorys.value = [];
    props.paymentHistory.forEach(item => {
        paymentHistorys.value.push(item);
    })
}, {
    deep: true
})
watch(props.cases, () => {//获得传入的案件
    props.cases.forEach(item => {
        caseMap.set(item.caseId, item);
    })
}, {
    deep: true,
})
</script>
<style lang="scss"></style>